import React from 'react';
import { connect } from 'react-redux';
import * as routeActions from 'react-router-redux';
import { setSideState } from '../../actions/mapAction';
import menuConfig from '../../constants/menuConfig';
import PERMISSION from '../../constants/permission';
import './index.scss';

class SideMenu extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectedKey: '',
      expandSubMenuKey: '',
      hideSideMenu: false,
    };
    this.generatorMenu = ::this.generatorMenu;
    this.generatorSubMenu = ::this.generatorSubMenu;
    this.generatorMenuItem = ::this.generatorMenuItem;
    this.expandSubMenu = ::this.expandSubMenu;
    this.changeRouteHandle = ::this.changeRouteHandle;
    this.expandSideMenu = ::this.expandSideMenu;
  }
  componentWillMount() {
    const { locationBeforeTransitions } = this.props;
    let navPath = locationBeforeTransitions.pathname.split('/');

    let expandKey = '';
    // menu item key max length eq 4
    if (navPath.length > 4) {
      navPath = navPath.slice(0, 4);
    }
    if (navPath.length === 4) {
      const tempPath = [...navPath];
      tempPath.pop();
      expandKey = tempPath.join('/');
    }
    this.setState({
      selectedKey: navPath.join('/'),
      expandSubMenuKey: expandKey,
    });
  }
  generatorMenu(config) {
    const { permissions } = this.props;
    if (!config.length) {
      return <div>{''}</div>;
    }
    return config.map((itemConfig) => {
      if (!PERMISSION.isPermissionAllow(itemConfig.permissions, permissions)) {
        return null;
      }
      if (itemConfig.children && itemConfig.children.length > 0) {
        return this.generatorSubMenu(itemConfig);
      }
      return this.generatorMenuItem(itemConfig, this.changeRouteHandle);
    });
  }
  generatorSubMenu(subMenuConfig) {
    const { expandSubMenuKey } = this.state;
    return (
      <div
        className={`sub-menu-wrap ${expandSubMenuKey.indexOf(subMenuConfig.route) > -1 ? 'sub-menu-active' : ''}`}
        key={subMenuConfig.route}
      >
        {this.generatorMenuItem(subMenuConfig, this.expandSubMenu, 'sub-menu-title')}
        <div className="children-menu-wrap">
          {subMenuConfig.children.map(itemConfig => this.generatorMenuItem(itemConfig, this.changeRouteHandle))}
        </div>
      </div>
    );
  }
  generatorMenuItem(menuItemConfig, clickHandle, classNames = '') {
    const { selectedKey } = this.state;
    const { permissions } = this.props;
    if (!PERMISSION.isPermissionAllow(menuItemConfig.permissions, permissions)) {
      return null;
    }
    const mixClickHandle = () => {
      clickHandle(menuItemConfig.route);
    };
    return (
      <div
        className={`menu-item ${classNames} ${menuItemConfig.route.indexOf(selectedKey) > -1 ? 'selected-menu-item' : ''}`}
        onClick={mixClickHandle}
        key={menuItemConfig.route}
      >
        {menuItemConfig.label}
      </div>
    );
  }
  expandSubMenu(key) {
    if (this.state.expandSubMenuKey === key) {
      this.setState({ expandSubMenuKey: '' });
    } else {
      this.setState({ expandSubMenuKey: key });
    }
  }
  changeRouteHandle(key) {
    const { dispatch } = this.props;
    let expandKey = '';
    const routeArr = key.split('/');
    if (routeArr.length > 3) {
      routeArr.pop();
      expandKey = routeArr.join('/');
    }
    this.setState({
      selectedKey: key,
      expandSubMenuKey: expandKey,
    }, () => {
      dispatch(routeActions.push(key));
    });
  }
  expandSideMenu() {
    const { hideSideMenu } = this.state;
    this.props.dispatch(setSideState(!hideSideMenu));
    this.setState(prevState => ({
      hideSideMenu: !prevState.hideSideMenu,
    }));
  }
  render() {
    const { hideSideMenu } = this.state;
    return (
      <div className={`side-menu-container ${hideSideMenu ? 'hide-side-menu' : ''}`}>
        <div className="side-wrap-project">
          <div className="side-menu">
            {this.generatorMenu(menuConfig)}
          </div>
        </div>
        <div className="expand-btn" onClick={this.expandSideMenu}>
          <img src="images/icon-expand.png" alt="展开" />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.userReducer,
  };
}

export default connect(mapStateToProps)(SideMenu);
